<template>
  <!-- 设备申请组件 -->

  <div class="Eqbox" v-show="falgF">
    <p class="title">{{ title1 }}</p>
    <img
      src="https://www.pmdaniu.com/storages/105603/1914f410fecdbaa56dc42b29ac89b5e8-30118/images/%E8%AE%BE%E5%A4%87%E7%94%B3%E8%AF%B7/u1737.png"
      alt=""
    />
    <ul>
      <li>{{ nematl }}</li>
      <li>IPX-7级别防水，水下1米可以浸泡30分钟。</li>
      <li>全钢加厚机身</li>
      <li>3D立体面板</li>
      <li>光电收货检测</li>
      <li>进口压缩机，自动压缩货物</li>
      <li>高亮LED照明</li>
      <li>智能云平台</li>
    </ul>
    <p class="dole">￥{{ jiage }}.00/年&emsp;{{ discounts }}</p>
    <el-button class="btn" color="#324CDD" @click="$emit('drawerflag')"
      >立即提交</el-button
    >
  </div>
  <div class="Eqbox2" v-show="!falgF">
    <p class="p1">设备申请</p>
    <div class="eqqq">
      <img
        src="https://www.pmdaniu.com/storages/105603/1914f410fecdbaa56dc42b29ac89b5e8-30118/images/%E8%AE%BE%E5%A4%87%E7%94%B3%E8%AF%B7/u1764.png"
        alt=""
      />
      <ul class="equl">
        <li>{{ Eqarrxq.reserves }}立方米存储空间</li>
        <li>IPX-7级别防水，水下1米可以浸泡30分钟。</li>
        <li>全钢加厚机身</li>
        <li>3D立体面板</li>
        <li>光电收货检测</li> 
        <li>进口压缩机，自动压缩货物</li>
        <li>高亮LED照明</li>
        <li>智能云平台</li>
        <li>全钢加厚机身</li>
        <li>3D立体面板</li>
        <li>光电收货检测</li>
        <li>进口压缩机，自动压缩货物</li>
        <li>高亮LED照明</li>
        <li>智能云平台</li>
      </ul>

      <p class="dole1">租金：¥ {{ Eqarrxq.leasePrice }}.00/年&emsp;{{ discounts }}</p>
    </div>
    <el-button class="btn1" color="#324CDD" @click="$emit('drawerflag1')"
      >返回重选</el-button
    >
    <el-button class="btn2" color="#324CDD" @click="EapFor">立即申请</el-button>
  </div>

  <!-- 设备申请弹窗 -->
</template>

<script setup>
import { useRouter } from "vue-router";

const router = useRouter();




defineEmits(["drawerflag", "drawerflag1"]);

 const de = defineProps({
  falgF: {
    type: Boolean,
  },
  jiage: {
    type: Number,

  },
  discounts: {
    type: String,
  },
  nematl: {
    type: String,
  },
  title1: {
    type: String,
  },
  Eqarrxq:{
    type:Object
  }
});


const EapFor = () => {
  router.push({
    path:"/equipment/EqapplyFor",
    query:{
      jg:de.Eqarrxq.leasePrice,
      model:de.Eqarrxq.model,
      reserves:de.Eqarrxq.reserves
    }
  });
};
</script>

<style lang="less" scoped>
.Eqbox {
  width: 296px;
  // height: 650px;
  background-color: white;
  margin: 0 auto;
  box-shadow: 0px 2px 10px rgb(51 51 51 / 35%);
  border-radius: 10px;
  position: relative;
  padding-bottom: 10px;
  .title {
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-bottom: 1px solid #ccc;
  }
  img {
    margin-top: 20px;
    margin-left: 110px;
    margin-bottom: 20px;
  }
  ul {
    width: 85%;
    margin-left: 40px;

    li {
      margin-bottom: 4px;
      list-style: disc;
    }
  }
  .dole {
    color: #f5365c;
    text-align: center;
    margin: 10px 0px;
    font-weight: bolder;
  }
  .btn {
    // background-color: #5e72e4;
    width: 90%;
    height: 45px;
    margin-left: 14px;
    color: white;
  }
}
.Eqbox2 {
  width: 1000px;
  height: 550px;
  box-shadow: 0px 2px 10px rgb(51 51 51 / 35%);

  border-radius: 10px;
  position: absolute;
  top: 150px;
  left: 350px;

  background-color: white;
  z-index: 1;
  .eqqq {
    display: flex;
    position: relative;
    margin-top: 40px;
    margin-bottom: 40px;
    img {
      margin-right: 50px;
      margin-left: 30px;
    }
    .equl {
      margin: 0 auto;
      // height: 400px;

      width: 85%;

      li {
        margin-bottom: 4px;
        list-style: disc;
      }
    }
  }
  .p1 {
    height: 60px;
    line-height: 60px;
    padding-left: 30px;
    border-bottom: 1px solid gray;
    font-size: 20px;
    font-weight: bold;
  }
  .dole1 {
    color: #f5365c;
    text-align: center;
    font-weight: bolder;
    font-size: 28px;
    position: absolute;
    right: 300px;
    bottom: 0px;
  }
  .btn1 {
    position: absolute;
    right: 150px;
    width: 100px;
    height: 40px;
    bottom: 10px;
  }
  .btn2 {
    position: absolute;
    right: 30px;
    width: 100px;
    height: 40px;
    bottom: 10px;
  }
}
</style>
